<template>
	<view class="code-wrap white-content">
		<uni-popup-captcha ref="popup-captcha" @confirm="verifyCaptcha" :scene="captchaFormData.scene" v-model="captchaFormData.captcha"></uni-popup-captcha>
		<view class="key-input">
			<view class="title">输入验证码</view>
			<view class="tips">验证码已发送至 {{ mobile }}</view>
			<u-code-input :focus="true" v-model="value" adjustPosition @finish="finish" maxlength="4"></u-code-input>
			<text :class="{ error: error }">验证码错误，请重新输入</text>
			<view class="captcha">
				<u-code ref="uCode" @change="codeChange" keep-running start-text="点我获取验证码"></u-code>
				<text @tap="codeClick" :text="countDowntips" :class="{ regain: !show }">{{ countDowntips }}</text>
			</view>
		</view>

		<u-toast ref="randomCodeErrorToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			captchaFormData: {
				captcha: '',
				scene: 'login-by-sms'
			},
			value: '',
			countDowntips: '',
			show: false,
			error: false,
			mobile: '',
			realMobile: '',
			randomCode: '1111',
			isTest: false
		};
	},
	computed: {},
	onLoad(option) {
		let mobile = option.mobile;
		if (mobile) {
			this.realMobile = mobile;
			this.mobile = mobile.slice(0, 3) + '****' + mobile.slice(-4);
		}
	},
	onReady() {
		this.$refs['popup-captcha'].open();
	},
	methods: {
		verifyCaptcha() {
			const uniIdCo = uniCloud.importObject('uni-id-co');
			uniIdCo.validateCaptcha(this.captchaFormData).then(e => {
				if(e.code == 0){
					this.sendMsg();
				}
			});
		},
		codeChange(text) {
			this.countDowntips = text;
		},
		codeClick() {
			if(!this.captchaFormData.captcha){
				this.$refs['popup-captcha'].open();
			}else{
				this.sendMsg();
			}
		},
		async sendMsg() {
			let that = this;
			if (this.$refs.uCode.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				});
				setTimeout(() => {
					uni.hideLoading();

					if (this.isTest) {
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					} else {
						const uniIdCo = uniCloud.importObject('uni-id-co');
						uniIdCo
							.sendSmsCode({
								mobile: that.realMobile,
								captcha: that.captchaFormData.captcha,
								scene: 'login-by-sms'
							})
							.then(dataRes => {
								//TODO 这个地方要测试
								this.randomCode = dataRes.code;
								uni.$u.toast('验证码已发送');
								that.$refs.uCode.start();
							})
							.catch(err => {
								console.log('云函数报错', err);
							});
					}
				}, 1000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		// 输入完验证码最后一位执行
		finish(value) {
			let that = this;
			if (value == this.randomCode) {
				const uniIdCo = uniCloud.importObject('uni-id-co');
				uniIdCo
					.loginBySms({
						mobile: that.realMobile,
						code: that.randomCode
					})
					.then(dataRes => {
						console.info(dataRes);
						// this.$u.vuex('vuex_token', res.token);
						// this.$u.vuex('vuex_isLogin', true);
						// this.$u.vuex('vuex_user', res.userInfo);
						// uni.switchTab({
						// 	url:"/pages/index/index"
						// })
					})
					.catch(err => {
						console.log('云函数报错', err);
					});

				// this.$u.post('/auth/login', {
				// 	username: this.realMobile
				// }).then(res => {
				// 	// res为服务端返回的数据

				// });
			} else {
				this.$refs.randomCodeErrorToast.show({
					type: 'error',
					title: '验证码不正确',
					message: '验证码不正确'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	min-height: 100%;
	background-color: #ffffff;
}
.code-wrap {
	padding: 80rpx;
	.box {
		margin: 30rpx 0;
		font-size: 30rpx;
		color: 555;
	}

	.key-input {
		padding: 30rpx 0;

		text {
			display: none;
		}

		.error {
			display: block;
			color: red;
			font-size: 30rpx;
			margin: 20rpx 0;
		}
	}

	.title {
		font-size: 50rpx;
		color: #333;
	}

	.key-input .tips {
		font-size: 30rpx;
		color: #333;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
	}

	.captcha {
		// color: $u-warning;
		font-size: 30rpx;
		margin-top: 40rpx;

		.noCaptcha {
			display: inline-block;
		}
		.regain {
			display: block;
		}
	}
}
</style>
